<!DOCTYPE html>
<style>
  div {
    margin: 2px 20px 10px 20px;
    padding: 2px 10px;
    outline-width: 8px;
    outline-color: rgba(0, 0, 255, 0.3);
    display: inline-block;
  }

  div.solid {
    outline-style: solid;
  }

  div.auto {
    outline-style: auto;
  }

  div.dotted {
    outline-style: dotted;
  }

  div.dashed {
    outline-style: dashed;
  }

  div.double {
    outline-style: double;
  }

  div.ridge {
    outline-style: ridge;
  }

  div.groove {
    outline-style: groove;
  }

  div.inset {
    outline-style: inset;
  }

  div.outset {
    outline-style: outset;
  }
</style>

The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners.<br><br>

<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
solid<br><br>

<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
double<br><br>

<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
dotted<br><br>

<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
dashed<br><br>

<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
ridge<br><br>

<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
groove<br><br>

<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
inset<br><br>

<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
outset
